<template>
  <button
    class="tz-button"
    v-bind="$attrs"
    :type="'tz-' + type"
    :class="['tz-button__' + size, { 'tz-button__round': round }]"
  >
    <slot />
  </button>
</template>
<script>
export default {
  name: "TzButton",
  components: {},
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "medium",
    },
    round: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    return {};
  },
};
</script>

<style lang="scss">
$types: (
    label: "primary",
    color: $primary-color,
  ),
  (
    label: "success",
    color: $success-color,
  ),
  (
    label: "warning",
    color: $warning-color,
  ),
  (
    label: "warn",
    color: $warning-color,
  ),
  (
    label: "danger",
    color: $danger-color,
  ),
  (
    label: "info",
    color: $info-color,
  );

button,
taro-button-core {
  @each $type in $types {
    $label: map-get($type, label);
    $color: map-get($type, color);
    &[type="tz-#{$label}"] {
      color: $white;
      background-color: $color;
      &::after {
        border-color: $color;
      }
    }
    &[plain][type="tz-#{$label}"] {
      background-color: transparent;
      color: $color;
      border: 1px solid $color;
    }
  }
}
.tz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding: 0;
  margin: 0;
  line-height: inherit;
  overflow: unset;
  &__round {
    border-radius: 999px;
  }
  &__round:after {
    border-radius: 999px;
  }
  &:not([disabled]):active {
    opacity: 0.7;
  }
  &[disabled] {
    opacity: 0.6;
  }
  &[type="tz-default"][disabled] {
    color: $black;
  }
}

.tz-button__large {
  height: 46px;
  width: 100%;
}
.tz-button__medium {
  height: 44px;
  width: 140px;
}
.tz-button__small {
  height: 40px;
  width: 100px;
}
</style>
